import React, { Component } from 'react';
import URL from 'url'
import api from '../api/index'
import '../assets/css/base.css'
import '../assets/css/index.css'

class Item extends Component {
    render() {
        let content = null
        if(this.props.item.type === this.props.type){
            content = <div className="group-item">
                <div className="item-desc flexbox">
                    <div className="item-logo">
                        {/*<img src={require("./assets/images/aps101.png")} alt=""/>*/}
                        <img src={require(`../assets/images/${this.props.item.icon}`)} alt={this.props.item.name} />
                    </div>
                    <div>
                        <p className="item-title">{this.props.item.name}</p>
                        <p>首發日期:{this.props.item.firstDate}</p>
                        <p>更新日期:{this.props.item.modifyDate}</p>
                    </div>
                </div>
                <div className="item-action">
                    <div className="item-text">
                        <p>{this.props.item.desc}</p>
                    </div>
                    <div className="btns flexbox">
                        <a href={`./history?id=${this.props.item.id}&env=${this.props.env}`} className="button empty" >版本記錄</a>
                        { this.props.item.url &&
                        <a href={this.props.item.url} className="button"
                           target="_blank">訪問</a>
                        }
                        { !this.props.item.url &&
                        <a href={`./download?id=${this.props.item.id}&env=${this.props.env}`} className="button" >下載</a>
                        }
                    </div>
                </div>
            </div>
        }
        return (
            content
        )
    }
}
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            env: 0,
            items: []
        };
    }
    componentDidMount() {
        console.log("環境變量")
        console.log(process.env)
        // 获取页面参数
        let params = URL.parse(window.location.href, true).query
        this.setState({env: Number(params.env) || 0})
        this.getData(Number(params.env) || 0)
    }
    checkout = (env) =>{
        this.getData(env)
        this.setState({ env: env });
    }
    getData = (env) => {
        api.access({env}).then((res) => {
            console.log(res)
            const items = res.data;
            this.setState({ items });
        })
        // axios.post('http://192.168.1.250:9093/property-app/api/v1/access',qs.stringify({env}))
        //     .then(res => {
        //         console.log(res)
        //         const items = res.data.data;
        //         this.setState({ items });
        //     });
    }
    render() {
        return (
            <div className="App">
                {/*<header className="header">*/}
                    {/*<div className="wrap">*/}
                        {/*<div className="logo"></div>*/}
                        {/*<div className="tabs flexbox">*/}
                      {/*<span className={['tabs-item', this.state.env === 0 ?'active' : ''].join(' ')}*/}
                            {/*onClick={() => this.checkout(0)}>測試環境</span>*/}
                            {/*<span*/}
                                {/*className={['tabs-item', this.state.env === 1 ?'active' : ''].join(' ')}*/}
                                {/*onClick={() => this.checkout(1)}>正式環境</span>*/}
                        {/*</div>*/}
                    {/*</div>*/}
                {/*</header>*/}
                <main className="main">
                    <div className="wrap">
                        <section>
                            <header className="group-header">
                                <p className="group-title">成功人士</p>
                            </header>
                            <div className="group">
                                {this.state.items.map(item =>
                                    <Item item={item} key={item.id} type={0} env={this.state.env}/>
                                )}
                            </div>
                        </section>
                        <section>
                            <header className="group-header">
                                <p className="group-title">物業代理</p>
                            </header>
                            <div className="group">
                                {this.state.items.map(item =>
                                    <Item item={item} key={item.id} type={1} env={this.state.env}/>
                                )}
                            </div>
                        </section>
                        <section>
                            <header className="group-header">
                                <p className="group-title">放盤/搵樓</p>
                            </header>
                            <div className="group">
                                {this.state.items.map(item =>
                                    <Item item={item} key={item.id} type={2} env={this.state.env}/>
                                )}
                            </div>
                        </section>
                        {/*<section>*/}
                        {/*<header className="group-header">*/}
                        {/*<p className="group-title">內部系統</p>*/}
                        {/*</header>*/}
                        {/*<div className="group">*/}
                        {/*<div className="group-item">*/}
                        {/*<div className="item-desc flexbox">*/}
                        {/*<div className="item-logo"><img src="./images/dictionaly.png" alt="樓盤字典" />*/}
                        {/*</div>*/}
                        {/*<div>*/}
                        {/*<p className="item-title">樓盤字典</p>*/}
                        {/*<p>首發日期:2018-08-31</p>*/}
                        {/*<p>更新日期:2018-08-31</p>*/}
                        {/*</div>*/}
                        {/*</div>*/}
                        {/*<div className="item-action">*/}
                        {/*<p>樓盤房源數據字典，維護樓盤及房源建模數據。</p>*/}
                        {/*<div className="btns flexbox">*/}
                        {/*<a href="./history.html" className="button empty" >版本記錄</a>*/}
                        {/*<a href="http://www.house101.cn/dictionary-manager/index" className="button"*/}
                        {/*>訪問</a>*/}
                        {/*</div>*/}
                        {/*</div>*/}
                        {/*</div>*/}
                        {/*<div className="group-item">*/}
                        {/*<div className="item-desc flexbox">*/}
                        {/*<div className="item-logo"><img src="./images/manager.png" alt="中央管理系統" />*/}
                        {/*</div>*/}
                        {/*<div>*/}
                        {/*<p className="item-title">中央管理系統</p>*/}
                        {/*<p>首發日期:2018-08-31</p>*/}
                        {/*<p>更新日期:2018-08-31</p>*/}
                        {/*</div>*/}
                        {/*</div>*/}
                        {/*<div className="item-action">*/}
                        {/*<div className="item-text">*/}
                        {/*<p>外網產品維護系統，運營管理系統</p>*/}
                        {/*</div>*/}
                        {/*<div className="btns flexbox">*/}
                        {/*<a href="./history.html" className="button empty" >版本記錄</a>*/}
                        {/*<a href="http://www.house101.cn/property-manager/index" className="button"*/}
                        {/*>訪問</a>*/}
                        {/*</div>*/}
                        {/*</div>*/}
                        {/*</div>*/}
                        {/*</div>*/}
                        {/*</section>*/}
                    </div>
                </main>
            </div>
        );
    }
}

export default App
// ReactDOM.render((
//     <Router>
//         <Route exact path='/' component={Home}/>
//     </Router>
// ), document.getElementById('root'));
